import React from 'react'
import {connect} from 'react-redux';
import {actionCreators} from '../store';
import {WriterWrapper, WriterTitle, WriterInfoSwitch, WriterList, WriterItem, FindMore} from '../style'

class Writer extends React.PureComponent {
    render() {
        const {writerPage, writerTotalPage, handleChangeWriter} = this.props;
        return (
            <WriterWrapper>
                <WriterTitle>
                    推荐作者
                    <WriterInfoSwitch onClick={() => handleChangeWriter(writerPage, writerTotalPage, this.spinIcon)}>
                            <span ref={(icon) => {
                                this.spinIcon = icon
                            }} className="iconfont spin">&#xe851;</span>换一批</WriterInfoSwitch>
                </WriterTitle>
                <WriterList>{
                  this.getWriterList()
                }
                </WriterList>
                <FindMore>查看全部 <span className="iconfont">&#xe61c;</span></FindMore>
            </WriterWrapper>
        )
    }

    getWriterList() {
        const {writerPage, writerList} = this.props;
        const newList = writerList.toJS();
        const pageList = [];
        if (newList.length) {
            for (let i = (writerPage - 1) * 5; i < writerPage * 5; i++) {
                pageList.push(
                    <WriterItem key={newList[i].id}>
                        <img
                            src={newList[i].imgUrl}
                            alt=""/>
                        <div className="QrCodeInfo">
                            <span className="title">{newList[i].writer}</span>
                            <span className="follow"><span className="iconfont">&#xe601;</span>关注</span>
                            <p className="description">{newList[i].desc}</p>
                        </div>
                    </WriterItem>
                )
            }
        }
        return(pageList)
    }

    componentDidMount() {
        this.props.getWriterInfo()
    }
}

const mapState = (state) => {
    return {
        writerList: state.getIn(['home', 'writerList']),
        writerPage: state.getIn(['home', 'writerPage']),
        writerTotalPage: state.getIn(['home', 'writerTotalPage']),
    }
};
const mapDispatch = (dispatch) => {
    return {
        getWriterInfo() {
           dispatch(actionCreators.getWriterList())
        },
        handleChangeWriter(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10)
            } else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
            if (page < totalPage) {
                dispatch(actionCreators.WriterInfoSwitch(page + 1))
            } else {
                dispatch(actionCreators.WriterInfoSwitch(1))
            }
        }
    }
};
export default connect(mapState, mapDispatch)(Writer)
